<template>
  <el-tabs v-model="tabActiveName" class="demo-tabs" @tab-click="handleClick">
    <template v-for="item in tabsList" :key="item.name">
      <el-tab-pane :label="item.label" :name="item.name">
        <slot :name="item.name"></slot>
      </el-tab-pane>
    </template>
  </el-tabs>
</template>

<script lang="ts" setup name="FosoTabs">
import type { TabsPaneContext } from 'element-plus';

import type { PropType } from 'vue';

defineProps({
  tabsList: {
    // eslint-disable-next-line no-use-before-define
    type: Array as PropType<TabsList[]>,
    default: () => [],
  },
  activeName: {
    type: String,
    default: '',
  },
});
const a = ref();
interface TabsList {
  label: string;
  name: string;
}
const tabActiveName = defineModel<string>('activeName');
// 点击tab事件
const handleClick = (tab: TabsPaneContext) => {
  a.value = tab.name;
};
</script>
